<template>
  <view class="price-wrap" :class="customClass">
    <view :style="{ color: color }" class="price-root flex">
      <view class="del" :style="{ 'border-color': color }" v-if="del"></view>
      <view
        v-if="hasUnit"
        class="unit"
        :style="{ 'font-size': unitSize + 'rpx' }"
        >{{ unit }}</view
      >
      <view class="price" :style="{ 'font-size': priceSize + 'rpx' }">{{
        _price
      }}</view>
    </view>
  </view>
</template>
<script>
  export default {
    props: {
      price: {
        type: [String, Number],
        default: 0
      },
      // customStyle:{
      // 	type:String
      // },
      unitSize: {
        type: [String, Number],
        default: 24
      },
      customClass: {
        type: [String],
        default: ''
      },
      priceSize: {
        type: [String, Number],
        default: 24
      },
      del: {
        type: Boolean,
        default: false
      },
      color: {
        type: String
      },
      hasUnit: {
        type: Boolean,
        default: true
      },
      unit: {
        type: String,
        default: '￥'
      }
    },
    computed: {
      _price() {
        const value = Number(this.price)
        return parseFloat(value.toFixed(2))
      }
    },
    data() {
      return {}
    }
  }
</script>

<style lang="scss" scoped>
  .price-wrap {
    display: inline-block;
  }
  .price-root {
    display: flex;
    align-items: baseline;
    position: relative;
    overflow: hidden;
  }
  .del {
    position: absolute;
    left: 0;
    top: 50%;
    right: 0;
    height: 1rpx;
    border-top: solid 1rpx;
  }
</style>
